<template>
  <div class="dashboard">

    <section>
      <div class="head">实时概况</div>

      <a-row :gutter="24">
        <a-col
          v-bind="span"
          v-for="(item, $index) in statsItem"
          :key="$index"
        >
          <ie-stats v-bind="item" />
        </a-col>
      </a-row>
    </section>

    <section>
      <div class="head">登录信息</div>

      <div class="table">
        <table>
          <tr>
            <th>最后一次登录时间：</th>
            <td>{{ format(store.userInfo.last_login_at) }}</td>
          </tr>
          <tr>
            <th>最后一次登录地址：</th>
            <td>{{ store.userInfo.last_ip }}</td>
          </tr>
        </table>
      </div>
    </section>

  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

import { useApi } from '/@/api'
import { useStore } from '/@/store'
import { format } from '/@/utils/helper'

import Stats1 from '/@/assets/icon/stats-1.png'
import Stats2 from '/@/assets/icon/stats-2.png'
import Stats3 from '/@/assets/icon/stats-3.png'

const store = useStore()
const stats = ref({})
const span = {
  xl: { span: 8 },
  lg: { span: 12 },
  md: { span: 24 }
}

const statsItem = computed(() => {
  const {
    thisweek_create_count = 0,
    lastweek_create_count = 0,
    thisweek_accept_count = 0,
    lastweek_accept_count = 0,
    thisweek_process_count = 0,
    lastweek_process_count = 0
  } = stats.value

  return [
    {
      statsData: [
        { label: '本周录入事件', value: thisweek_create_count },
        { label: '上周录入事件', value: lastweek_create_count }
      ],
      statsUnit: '件',
      imgSrc: Stats1,
      showSuffix: true
    },
    {
      statsData: [
        { label: '本周审核事件', value: thisweek_accept_count },
        { label: '上周审核事件', value: lastweek_accept_count }
      ],
      statsUnit: '件',
      imgSrc: Stats2,
      showSuffix: true
    },
    {
      statsData: [
        { label: '本周处理事件', value: thisweek_process_count },
        { label: '上周处理事件', value: lastweek_process_count }
      ],
      statsUnit: '件',
      imgSrc: Stats3,
      showSuffix: true
    }
  ]
})

useApi()
  .get('stats', null, {
    authorize: true
  })
  .then(res => {
    if (res.code === 0) {
      stats.value = res.data || {}
    }
  })
</script>

<style lang="less">
.dashboard {
  // background-color: #fff;
  height: 100%;
  padding: 24px;

  section {
    margin-bottom: 24px;

    .head {
      font-size: 16px;
      line-height: 24px;
      font-weight: bold;
      color: #323237;
      margin-bottom: 26px;

      &:before {
        content: '';
        background-color: #395DF2;
        display: inline-block;
        width: 3px;
        height: 16px;
        vertical-align: top;
        margin-top: 4px;
        margin-right: 15px;
      }
    }

    .table {

      table {
        border-collapse: collapse;
      }

      td, th {
        font-size: 14px;
        line-height: 24px;
        font-weight: normal;
        color: #6E6E73;
      }
    }
  }
}
</style>